<template>
  <div class="baidubox">
    <!-- 顶部 -->
    <div class="header">
      <img class="logo" src="@/assets/lexiconStatistics/logo.png" alt="" />
      <ul class="menus">
        <li>
          <img src="@/assets/lexiconStatistics/icon1.png" alt="" />
          <span>趋势研究</span>
        </li>
        <li>
          <img src="@/assets/lexiconStatistics/icon2.png" alt="" />
          <span>需求图谱</span>
        </li>
        <li>
          <img src="@/assets/lexiconStatistics/icon3.png" alt="" />
          <span>人群画像</span>
        </li>
      </ul>
    </div>
    <!-- 内容 -->
    <Tabs :dataSource="dataSource">
      <template #header>
        <p class="fs_12" style="color: #cbd2d5">2021-11-15 ~ 2021-11-21</p>
      </template>
    </Tabs>
    <Line style="height: 40vh" />
    <!--  -->
    <Table />
    <p class="pl_20" style="color: #cbd2d5">
      <ExclamationCircleOutlined />
      <span> 数据更新时间：每天12~16时，受数据波动影响，可能会有延迟。 </span>
    </p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Tabs from "@/components/Tabs";
import Line from "./components/Line";
import Table from "./components/Table";

const dataSource = ref(["搜索指数"]);
</script>

<style lang="less" scoped>
.baidubox {
  width: 100%;
  border: 1px solid #1f2327;
  padding: 0 10px;
}
.header {
  width: 100%;
  padding: 10px 20px;
  background: #1f73f3;
  display: flex;
  .logo {
    height: auto;
    width: 105px;
    margin-right: 20px;
  }
  .menus {
    display: flex;
    li {
      display: flex;
      align-items: center;
      margin-right: 30px;
      font-size: 14px;
      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
  }
}
</style>
